import Image from "next/image"
import Link from "next/link"
import {
   ChevronLeft,
   Home,
   LineChart,
   Package,
   Package2,
   PanelLeft,
   PlusCircle,
   Search,
   Settings,
   ShoppingCart,
   Upload,
   Users2,
} from "lucide-react"

import { Badge } from "~/registry/miami/ui/badge"
import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
} from "~/registry/miami/ui/breadcrumb"
import { Button } from "~/registry/miami/ui/button"
import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
} from "~/registry/miami/ui/card"
import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
} from "~/registry/miami/ui/dropdown-menu"
import { Input } from "~/registry/miami/ui/input"
import { Label } from "~/registry/miami/ui/label"
import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
} from "~/registry/miami/ui/select"
import { Sheet, SheetContent, SheetTrigger } from "~/registry/miami/ui/sheet"
import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
} from "~/registry/miami/ui/table"
import { Textarea } from "~/registry/miami/ui/textarea"
import { ToggleGroup, ToggleGroupItem } from "~/registry/miami/ui/toggle-group"
import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
} from "~/registry/miami/ui/tooltip"

export const description =
   "A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images."

export const iframeHeight = "1100px"

export const containerClassName = "w-full h-full"

export default function Dashboard() {
   return (
      <div className="bg-muted/40 flex min-h-screen w-full flex-col">
         <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
            <nav className="flex flex-col items-center gap-4 px-2 py-4">
               <Link
                  href="#"
                  className="bg-primary text-primary-foreground group flex size-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:size-8 md:text-base"
               >
                  <Package2 className="size-4 transition-all group-hover:scale-110" />
                  <span className="sr-only">Acme Inc</span>
               </Link>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Link
                        href="#"
                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
                     >
                        <Home className="size-5" />
                        <span className="sr-only">Dashboard</span>
                     </Link>
                  </TooltipTrigger>
                  <TooltipContent side="right">Dashboard</TooltipContent>
               </Tooltip>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Link
                        href="#"
                        className="hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
                     >
                        <ShoppingCart className="size-5" />
                        <span className="sr-only">Orders</span>
                     </Link>
                  </TooltipTrigger>
                  <TooltipContent side="right">Orders</TooltipContent>
               </Tooltip>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Link
                        href="#"
                        className="bg-accent text-accent-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
                     >
                        <Package className="size-5" />
                        <span className="sr-only">Products</span>
                     </Link>
                  </TooltipTrigger>
                  <TooltipContent side="right">Products</TooltipContent>
               </Tooltip>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Link
                        href="#"
                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
                     >
                        <Users2 className="size-5" />
                        <span className="sr-only">Customers</span>
                     </Link>
                  </TooltipTrigger>
                  <TooltipContent side="right">Customers</TooltipContent>
               </Tooltip>
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Link
                        href="#"
                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
                     >
                        <LineChart className="size-5" />
                        <span className="sr-only">Analytics</span>
                     </Link>
                  </TooltipTrigger>
                  <TooltipContent side="right">Analytics</TooltipContent>
               </Tooltip>
            </nav>
            <nav className="mt-auto flex flex-col items-center gap-4 px-2 py-4">
               <Tooltip>
                  <TooltipTrigger asChild>
                     <Link
                        href="#"
                        className="text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8"
                     >
                        <Settings className="size-5" />
                        <span className="sr-only">Settings</span>
                     </Link>
                  </TooltipTrigger>
                  <TooltipContent side="right">Settings</TooltipContent>
               </Tooltip>
            </nav>
         </aside>
         <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
            <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
               <Sheet>
                  <SheetTrigger asChild>
                     <Button
                        size="icon"
                        variant="outline"
                        className="sm:hidden"
                     >
                        <PanelLeft className="size-5" />
                        <span className="sr-only">Toggle Menu</span>
                     </Button>
                  </SheetTrigger>
                  <SheetContent side="left" className="sm:max-w-xs">
                     <nav className="grid gap-6 text-lg font-medium">
                        <Link
                           href="#"
                           className="bg-primary text-primary-foreground group flex size-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base"
                        >
                           <Package2 className="size-5 transition-all group-hover:scale-110" />
                           <span className="sr-only">Acme Inc</span>
                        </Link>
                        <Link
                           href="#"
                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
                        >
                           <Home className="size-5" />
                           Dashboard
                        </Link>
                        <Link
                           href="#"
                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
                        >
                           <ShoppingCart className="size-5" />
                           Orders
                        </Link>
                        <Link
                           href="#"
                           className="text-foreground flex items-center gap-4 px-2.5"
                        >
                           <Package className="size-5" />
                           Products
                        </Link>
                        <Link
                           href="#"
                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
                        >
                           <Users2 className="size-5" />
                           Customers
                        </Link>
                        <Link
                           href="#"
                           className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5"
                        >
                           <LineChart className="size-5" />
                           Settings
                        </Link>
                     </nav>
                  </SheetContent>
               </Sheet>
               <Breadcrumb className="hidden md:flex">
                  <BreadcrumbList>
                     <BreadcrumbItem>
                        <BreadcrumbLink asChild>
                           <Link href="#">Dashboard</Link>
                        </BreadcrumbLink>
                     </BreadcrumbItem>
                     <BreadcrumbSeparator />
                     <BreadcrumbItem>
                        <BreadcrumbLink asChild>
                           <Link href="#">Products</Link>
                        </BreadcrumbLink>
                     </BreadcrumbItem>
                     <BreadcrumbSeparator />
                     <BreadcrumbItem>
                        <BreadcrumbPage>Edit Product</BreadcrumbPage>
                     </BreadcrumbItem>
                  </BreadcrumbList>
               </Breadcrumb>
               <div className="relative ml-auto flex-1 md:grow-0">
                  <Search className="text-muted-foreground absolute left-2.5 top-2.5 size-4" />
                  <Input
                     type="search"
                     placeholder="Search..."
                     className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[320px]"
                  />
               </div>
               <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                     <Button
                        variant="outline"
                        size="icon"
                        className="overflow-hidden rounded-full"
                     >
                        <Image
                           src="/placeholder-user.jpg"
                           width={36}
                           height={36}
                           alt="Avatar"
                           className="overflow-hidden rounded-full"
                        />
                     </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                     <DropdownMenuLabel>My Account</DropdownMenuLabel>
                     <DropdownMenuSeparator />
                     <DropdownMenuItem>Settings</DropdownMenuItem>
                     <DropdownMenuItem>Support</DropdownMenuItem>
                     <DropdownMenuSeparator />
                     <DropdownMenuItem>Logout</DropdownMenuItem>
                  </DropdownMenuContent>
               </DropdownMenu>
            </header>
            <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
               <div className="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
                  <div className="flex items-center gap-4">
                     <Button variant="outline" size="icon" className="size-7">
                        <ChevronLeft className="size-4" />
                        <span className="sr-only">Back</span>
                     </Button>
                     <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
                        Pro Controller
                     </h1>
                     <Badge variant="outline" className="ml-auto sm:ml-0">
                        In stock
                     </Badge>
                     <div className="hidden items-center gap-2 md:ml-auto md:flex">
                        <Button variant="outline" size="sm">
                           Discard
                        </Button>
                        <Button size="sm">Save Product</Button>
                     </div>
                  </div>
                  <div className="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
                     <div className="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
                        <Card x-chunk="dashboard-07-chunk-0">
                           <CardHeader>
                              <CardTitle>Product Details</CardTitle>
                              <CardDescription>
                                 Lipsum dolor sit amet, consectetur adipiscing
                                 elit
                              </CardDescription>
                           </CardHeader>
                           <CardContent>
                              <div className="grid gap-6">
                                 <div className="grid gap-3">
                                    <Label htmlFor="name">Name</Label>
                                    <Input
                                       id="name"
                                       type="text"
                                       className="w-full"
                                       defaultValue="Gamer Gear Pro Controller"
                                    />
                                 </div>
                                 <div className="grid gap-3">
                                    <Label htmlFor="description">
                                       Description
                                    </Label>
                                    <Textarea
                                       id="description"
                                       defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
                                       className="min-h-32"
                                    />
                                 </div>
                              </div>
                           </CardContent>
                        </Card>
                        <Card x-chunk="dashboard-07-chunk-1">
                           <CardHeader>
                              <CardTitle>Stock</CardTitle>
                              <CardDescription>
                                 Lipsum dolor sit amet, consectetur adipiscing
                                 elit
                              </CardDescription>
                           </CardHeader>
                           <CardContent>
                              <Table>
                                 <TableHeader>
                                    <TableRow>
                                       <TableHead className="w-[100px]">
                                          SKU
                                       </TableHead>
                                       <TableHead>Stock</TableHead>
                                       <TableHead>Price</TableHead>
                                       <TableHead className="w-[100px]">
                                          Size
                                       </TableHead>
                                    </TableRow>
                                 </TableHeader>
                                 <TableBody>
                                    <TableRow>
                                       <TableCell className="font-semibold">
                                          GGPC-001
                                       </TableCell>
                                       <TableCell>
                                          <Label
                                             htmlFor="stock-1"
                                             className="sr-only"
                                          >
                                             Stock
                                          </Label>
                                          <Input
                                             id="stock-1"
                                             type="number"
                                             defaultValue="100"
                                          />
                                       </TableCell>
                                       <TableCell>
                                          <Label
                                             htmlFor="price-1"
                                             className="sr-only"
                                          >
                                             Price
                                          </Label>
                                          <Input
                                             id="price-1"
                                             type="number"
                                             defaultValue="99.99"
                                          />
                                       </TableCell>
                                       <TableCell>
                                          <ToggleGroup
                                             type="single"
                                             defaultValue="s"
                                             variant="outline"
                                          >
                                             <ToggleGroupItem value="s">
                                                S
                                             </ToggleGroupItem>
                                             <ToggleGroupItem value="m">
                                                M
                                             </ToggleGroupItem>
                                             <ToggleGroupItem value="l">
                                                L
                                             </ToggleGroupItem>
                                          </ToggleGroup>
                                       </TableCell>
                                    </TableRow>
                                    <TableRow>
                                       <TableCell className="font-semibold">
                                          GGPC-002
                                       </TableCell>
                                       <TableCell>
                                          <Label
                                             htmlFor="stock-2"
                                             className="sr-only"
                                          >
                                             Stock
                                          </Label>
                                          <Input
                                             id="stock-2"
                                             type="number"
                                             defaultValue="143"
                                          />
                                       </TableCell>
                                       <TableCell>
                                          <Label
                                             htmlFor="price-2"
                                             className="sr-only"
                                          >
                                             Price
                                          </Label>
                                          <Input
                                             id="price-2"
                                             type="number"
                                             defaultValue="99.99"
                                          />
                                       </TableCell>
                                       <TableCell>
                                          <ToggleGroup
                                             type="single"
                                             defaultValue="m"
                                             variant="outline"
                                          >
                                             <ToggleGroupItem value="s">
                                                S
                                             </ToggleGroupItem>
                                             <ToggleGroupItem value="m">
                                                M
                                             </ToggleGroupItem>
                                             <ToggleGroupItem value="l">
                                                L
                                             </ToggleGroupItem>
                                          </ToggleGroup>
                                       </TableCell>
                                    </TableRow>
                                    <TableRow>
                                       <TableCell className="font-semibold">
                                          GGPC-003
                                       </TableCell>
                                       <TableCell>
                                          <Label
                                             htmlFor="stock-3"
                                             className="sr-only"
                                          >
                                             Stock
                                          </Label>
                                          <Input
                                             id="stock-3"
                                             type="number"
                                             defaultValue="32"
                                          />
                                       </TableCell>
                                       <TableCell>
                                          <Label
                                             htmlFor="price-3"
                                             className="sr-only"
                                          >
                                             Stock
                                          </Label>
                                          <Input
                                             id="price-3"
                                             type="number"
                                             defaultValue="99.99"
                                          />
                                       </TableCell>
                                       <TableCell>
                                          <ToggleGroup
                                             type="single"
                                             defaultValue="s"
                                             variant="outline"
                                          >
                                             <ToggleGroupItem value="s">
                                                S
                                             </ToggleGroupItem>
                                             <ToggleGroupItem value="m">
                                                M
                                             </ToggleGroupItem>
                                             <ToggleGroupItem value="l">
                                                L
                                             </ToggleGroupItem>
                                          </ToggleGroup>
                                       </TableCell>
                                    </TableRow>
                                 </TableBody>
                              </Table>
                           </CardContent>
                           <CardFooter className="justify-center border-t p-4">
                              <Button
                                 size="sm"
                                 variant="ghost"
                                 className="gap-1"
                              >
                                 <PlusCircle className="size-3.5" />
                                 Add Variant
                              </Button>
                           </CardFooter>
                        </Card>
                        <Card x-chunk="dashboard-07-chunk-2">
                           <CardHeader>
                              <CardTitle>Product Category</CardTitle>
                           </CardHeader>
                           <CardContent>
                              <div className="grid gap-6 sm:grid-cols-3">
                                 <div className="grid gap-3">
                                    <Label htmlFor="category">Category</Label>
                                    <Select>
                                       <SelectTrigger
                                          id="category"
                                          aria-label="Select category"
                                       >
                                          <SelectValue placeholder="Select category" />
                                       </SelectTrigger>
                                       <SelectContent>
                                          <SelectItem value="clothing">
                                             Clothing
                                          </SelectItem>
                                          <SelectItem value="electronics">
                                             Electronics
                                          </SelectItem>
                                          <SelectItem value="accessories">
                                             Accessories
                                          </SelectItem>
                                       </SelectContent>
                                    </Select>
                                 </div>
                                 <div className="grid gap-3">
                                    <Label htmlFor="subcategory">
                                       Subcategory (optional)
                                    </Label>
                                    <Select>
                                       <SelectTrigger
                                          id="subcategory"
                                          aria-label="Select subcategory"
                                       >
                                          <SelectValue placeholder="Select subcategory" />
                                       </SelectTrigger>
                                       <SelectContent>
                                          <SelectItem value="t-shirts">
                                             T-Shirts
                                          </SelectItem>
                                          <SelectItem value="hoodies">
                                             Hoodies
                                          </SelectItem>
                                          <SelectItem value="sweatshirts">
                                             Sweatshirts
                                          </SelectItem>
                                       </SelectContent>
                                    </Select>
                                 </div>
                              </div>
                           </CardContent>
                        </Card>
                     </div>
                     <div className="grid auto-rows-max items-start gap-4 lg:gap-8">
                        <Card x-chunk="dashboard-07-chunk-3">
                           <CardHeader>
                              <CardTitle>Product Status</CardTitle>
                           </CardHeader>
                           <CardContent>
                              <div className="grid gap-6">
                                 <div className="grid gap-3">
                                    <Label htmlFor="status">Status</Label>
                                    <Select>
                                       <SelectTrigger
                                          id="status"
                                          aria-label="Select status"
                                       >
                                          <SelectValue placeholder="Select status" />
                                       </SelectTrigger>
                                       <SelectContent>
                                          <SelectItem value="draft">
                                             Draft
                                          </SelectItem>
                                          <SelectItem value="published">
                                             Active
                                          </SelectItem>
                                          <SelectItem value="archived">
                                             Archived
                                          </SelectItem>
                                       </SelectContent>
                                    </Select>
                                 </div>
                              </div>
                           </CardContent>
                        </Card>
                        <Card
                           className="overflow-hidden"
                           x-chunk="dashboard-07-chunk-4"
                        >
                           <CardHeader>
                              <CardTitle>Product Images</CardTitle>
                              <CardDescription>
                                 Lipsum dolor sit amet, consectetur adipiscing
                                 elit
                              </CardDescription>
                           </CardHeader>
                           <CardContent>
                              <div className="grid gap-2">
                                 <Image
                                    alt="Product image"
                                    className="aspect-square w-full rounded-md object-cover"
                                    height="300"
                                    src="/placeholder.svg"
                                    width="300"
                                 />
                                 <div className="grid grid-cols-3 gap-2">
                                    <button>
                                       <Image
                                          alt="Product image"
                                          className="aspect-square w-full rounded-md object-cover"
                                          height="84"
                                          src="/placeholder.svg"
                                          width="84"
                                       />
                                    </button>
                                    <button>
                                       <Image
                                          alt="Product image"
                                          className="aspect-square w-full rounded-md object-cover"
                                          height="84"
                                          src="/placeholder.svg"
                                          width="84"
                                       />
                                    </button>
                                    <button className="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
                                       <Upload className="text-muted-foreground size-4" />
                                       <span className="sr-only">Upload</span>
                                    </button>
                                 </div>
                              </div>
                           </CardContent>
                        </Card>
                        <Card x-chunk="dashboard-07-chunk-5">
                           <CardHeader>
                              <CardTitle>Archive Product</CardTitle>
                              <CardDescription>
                                 Lipsum dolor sit amet, consectetur adipiscing
                                 elit.
                              </CardDescription>
                           </CardHeader>
                           <CardContent>
                              <div></div>
                              <Button size="sm" variant="secondary">
                                 Archive Product
                              </Button>
                           </CardContent>
                        </Card>
                     </div>
                  </div>
                  <div className="flex items-center justify-center gap-2 md:hidden">
                     <Button variant="outline" size="sm">
                        Discard
                     </Button>
                     <Button size="sm">Save Product</Button>
                  </div>
               </div>
            </main>
         </div>
      </div>
   )
}
